<!-- 
    事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：

事件委托的原理:
   面试：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置
   每个子节点。以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，
   因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。

 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <ul>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
    </ul>

    <script> 
    var ul = document.querySelector('ul');

        //当下面的代码共存时，因为我们给每个小li注册绑定了一个点击事件，
        // var ul = document.querySelector('ul');
        // var lis = ul.querySelectorAll('li');
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].addEventListener('click', function () {
        //         alert('我是点击了下li')
        //     })
        // }


        //当注释上面的代码时，下面的注册的是ul事件，而li没有绑定事件，会向上冒泡
        //当冒泡到ul时，会触发ul的绑定的注册事件，然后会处理程序

        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            alert('知否知否，点我应有弹框在手');
            console.log(e.target);   //返回当前点击的对象
            e.target.style.backgroundColor = 'red';

        })

        // 以下案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，
        //    因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
        //事件委托的核心原理，给父节点添加侦听器，利用事件冒泡影响每一个子节点
        // e.target点击了哪个元素，就返回哪个元素 this 那个元素绑定了这个点击事件，那么久返回谁





    </script>
</body>

</html>